import { Column } from '@ant-design/charts';
import { Pie } from '@ant-design/plots';
import { ProCard, StatisticCard } from '@ant-design/pro-components';
import { useAccess, useModel } from '@umijs/max';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import React, { useState } from 'react';
dayjs.extend(customParseFormat);
const dateFormat = 'YYYY/MM/DD';

interface AnalysisPreviewRankProps {
  loading: boolean;
  previewData: TophubRankData.AnalysisPreview | undefined;
  onRefurbish: () => void;
}

const AnalysisPreviewRank: React.FC<AnalysisPreviewRankProps> = ({
  loading,
  previewData,
  onRefurbish,
}) => {
  const access = useAccess();

  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};

  const ColumnChartsView = (dateDatas: { date: string; value: number }[] = []) => {
    const config = {
      data: dateDatas,
      width: 300,
      height: 150,
      padding: 25,
      shapeField: 'smooth',
      xField: 'date',
      yField: 'value',
      style: {
        fill: 'linear-gradient(-90deg, white 0%, #108ee9 100%)',
        fillOpacity: 0.6,
      },
      legend: {
        color: {
          title: false,
          position: 'right',
          rowPadding: 5,
        },
      },
    };

    return <Column {...config} />;
  };

  const PieChartsView = (
    sourceDatas: {
      sourceId: string;
      sourceName: string;
      levelId: string;
      levelName: string;
      channelId: string;
      channelName: string;
      value: number;
    }[] = [],
  ) => {
    const datas = sourceDatas.map((item) => {
      return { type: `${item.channelName} - ${item.sourceName}`, value: item.value };
    });

    console.log('=====', datas);

    const config = {
      data: datas,
      padding: 10,
      angleField: 'value',
      colorField: 'type',
      innerRadius: 0.6,
      label: {
        text: 'value',
        style: {
          fontWeight: 'bold',
        },
      },
      legend: {
        color: {
          title: false,
          position: 'right',
          rowPadding: 5,
        },
      },
      annotations: [
        {
          type: 'text',
          style: {
            text: '',
            x: '50%',
            y: '50%',
            textAlign: 'center',
            fontSize: 40,
            fontStyle: 'bold',
          },
        },
      ],
    };
    return <Pie {...config} />;
  };

  const descriptionView = (title: string, value?: number, unit?: string) => {
    return (
      <div>
        <span
          style={{
            fontSize: 12,
            marginRight: 6,
          }}
        >
          {title}
        </span>
        <span
          style={{
            fontSize: 12,
            color: 'rgba(0, 0, 0, 0.65)',
          }}
        >
          {value}
          {unit}
        </span>
      </div>
    );
  };
  const [responsive, setResponsive] = useState(false);

  return (
    <>
      <ProCard
        loading={previewData == undefined}
        title="数据概览"
        extra={previewData?.executeDate}
        split={'horizontal'}
        headerBordered
      >
        <ProCard split="horizontal">
          <ProCard split="vertical">
            <ProCard split="horizontal">
              <ProCard split="horizontal">
                <ProCard split="vertical">
                  <StatisticCard
                    statistic={{
                      title: '词条记录 / 上榜作品',
                      value: `${previewData?.totalRecord} / ${previewData?.totalDeduplicationHot}`,
                      description: (
                        <>
                          {descriptionView('市属媒体', previewData?.countLevel2000, '条')}
                          {descriptionView('区县媒体', previewData?.countLevel3000, '条')}
                        </>
                      ),
                    }}
                  />
                  <StatisticCard
                    statistic={{
                      title: '收录账号 / 检测账号',
                      value: `${previewData?.totalRecordSource} / ${previewData?.totalSource}`,
                      description: (
                        <>
                          {descriptionView('市属媒体', previewData?.countSourceLevel2000, '个')}
                          {descriptionView('区县媒体', previewData?.countSourceLevel3000, '个')}
                        </>
                      ),
                    }}
                  />
                </ProCard>
                <ProCard split="vertical">
                  <StatisticCard
                    statistic={{
                      title: '全国 ',
                      value: `${previewData?.countHotCity0}`,
                      description: (
                        <>
                          {descriptionView('市属媒体', previewData?.countLevel2000HotCity0, '条')}
                          {descriptionView('区县媒体', previewData?.countLevel3000HotCity0, '条')}
                        </>
                      ),
                    }}
                  />
                  <StatisticCard
                    statistic={{
                      title: '重庆',
                      value: `${previewData?.countHotCity1}`,
                      description: (
                        <>
                          {descriptionView('市属媒体', previewData?.countLevel2000HotCity1, '条')}
                          {descriptionView('区县媒体', previewData?.countLevel3000HotCity1, '条')}
                        </>
                      ),
                    }}
                  />
                </ProCard>
              </ProCard>
            </ProCard>
            {/* <StatisticCard
              title="占比"
              chart={previewData?.sourceDatas && PieChartsView(previewData?.sourceDatas)}
            /> */}
          </ProCard>
          <StatisticCard
            title="热榜走势"
            chart={previewData?.dateDatas && ColumnChartsView(previewData?.dateDatas)}
          />
        </ProCard>
        <ProCard></ProCard>
      </ProCard>
    </>
  );
};
export default AnalysisPreviewRank;
